<template>
  <div :class="['app', { isDark }]">
    <suspense>
      <router-view />
    </suspense>
    <Dark @handleClick="handleClick" />
  </div>
</template>

<script lang="ts">
// import { Options, setup, Vue, ref } from 'vue-class-component'
import { ref } from 'vue'
import Dark from '@/components/animation/dark.vue'
// @Options({
//   components: { Dark }
// })
// export default class App extends Vue {
// }
export default {
  components: { Dark },
  setup() {
    let isDark = ref(false)
    function handleClick() {
      isDark.value = !isDark.value
      console.log(isDark.value)
    }
    return { handleClick, isDark }
  }
}
</script>

<style lang="scss">
@import './assets/css/common.scss';
#app,
.app {
  // background-color: #fef4ad;
  // animation: change-background 3s infinite linear;
  width: 100%;
  height: 100%;
}
.isDark {
  background-color: black;
}
</style>
